<template>
  <div id="zonghe">
    <div class="step-one">
      <div class="all-title">综合能力评定</div>
      <div class="step-one-content">
        <div class="box-left all-box">
          <chart1 />
        </div>
        <div class="box-right all-box">
          <chart2 />
        </div>
      </div>
    </div>
    <!-- <div class="step-two">
      <div class="step-two-content">
        <div class="box-left all-box">
          <chart3 />
        </div>
        <div class="box-right all-box">
          <chart4 />
        </div>
      </div>
    </div> -->
    <div class="step-three">
      <el-table
        class="my-table"
        :data="tableData"
        v-loading="loadingTable"
        element-loading-text="加载中..."
        style="width: 100%"
      >
        <!-- 第一列：毕业要求名称 -->
        <el-table-column
          prop="name"
          label="毕业要求"
          width="200"
        />

        <!-- 动态列：每个培养目标作为一列 -->
        <el-table-column
          v-for="(checks, colIndex) in dynamicColumns"
          :key="colIndex"
          :label="dynamicHeaders[colIndex]"
        >
          <template #default="{ row, $index }">
            <!-- 
        row: 当前行的 requirement
        $index: 当前行在 tableData 中的索引（0,1,2...）
        checks: 当前列（某个 goal）对所有 requirement 的支持数组
        所以取 checks[$index] 就是 当前 goal 是否被 当前 requirement 支持
      -->
            <div v-if="checks[$index] === true">
              <el-icon class="green">
                <CircleCheckFilled />
              </el-icon>
            </div>
            <div v-else-if="checks[$index] === false">
              <el-icon class="red">
                <WarningFilled />
              </el-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="step-four">
      <div class="title">
        <el-icon>
          <Document />
        </el-icon>
        毕业目标
      </div>
      <div class="goal-message">
        {{ goalMessage }}
      </div>
      <el-table
        class="my-table"
        :data="targetData"
        :show-header="false"
        v-loading="loadingTarget"
        element-loading-text="加载中..."
        style="width: 100%"
      >
        <el-table-column
          label="name"
          align="center"
          width="111"
        >
          <template #default="{ $index }">
            <div class="blue">目标{{ $index+1 }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="name"
        >
          <template #default="{ row }">
            <div class="blue">{{ row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="content"
          class="table-content"
        />
      </el-table>
    </div>
    <div class="step-five">
      <div class="title">
        <el-icon>
          <Tickets />
        </el-icon>
        毕业要求
      </div>
      <div class="five-btns">
        <div
          v-for="(item,index) in tabBtns"
          :key="index"
          class="five-btn"
          :class="{active: tabActive === index}"
          @click="tabActive = index"
        >{{ item }}</div>
      </div>
      <div class="five-content">
        <div class="tab-content">{{ tabContent }}</div>
        <div
          v-for="(item,index) in tabChildren"
          :key="index"
        >
          {{ tabActive+1 }}-{{item.number}}
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import chart1 from "@/components/ZongHeChart1.vue";
import chart2 from "@/components/ZongHeChart2.vue";
// import chart3 from "@/components/ZongHeChart3.vue";
// import chart4 from "@/components/ZongHeChart4.vue";
export default {
  name: "Dashboard",
  components: {
    chart1,
    chart2,
    // chart3,
    // chart4,
  },
  data() {
    return {
      goalMessage: "",
      dynamicHeaders: [],
      dynamicColumns: [],
      tableData: [],
      targetData: [],
      loadingTable: false,
      loadingTarget: false,
      tabBtns: [],
      tabActive: 0,
      tabData: [],
      tabContent: "",
      tabChildren: [],
    };
  },
  computed: {
    tabContent() {
      return this.tabData[this.tabActive]?.content;
    },
    tabChildren() {
      return this.tabData[this.tabActive]?.children;
    },
  },
  created() {
    this.getGoal();
    this.getTableList();
    this.getTargetList();
    this.getRequirements();
  },
  methods: {
    //获取毕业目标
    getGoal() {
      const url = "/tes/unauthorized/config";
      const params = {
        keys: "graduation_goal",
      };
      this.$axios
        .get(url, { params })
        .then((response) => {
          const res = response.data;
          this.goalId = res.graduation_goal[0].id;
          this.goalMessage = res.graduation_goal[0].keyValue;
        })
        .finally(() => {});
    },
    //评定table
    getTableList() {
      const url = "/tes/graduation/goal-requirements";
      this.loadingTable = true;
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          const goals = res.goals; // 培养目标 → 作为列头
          const rows = res.rows; // 毕业要求 + checks → 作为行

          // ✅ 行数据：每个毕业要求作为一行
          this.tableData = rows.map((item) => item.requirement);

          // ✅ 列头：每个培养目标的名字
          this.dynamicHeaders = goals.map((goal) => goal.name);

          // ✅ 列数据：每个列是某个 goal 对应的 checks（按 requirement 排列）
          // 我们需要提取：第 j 个 goal 被哪些 requirement 支持？
          // 即：对于每个 goal j，收集所有 rows[i].checks[j]
          const transposedChecks = [];
          const goalCount = goals.length;

          for (let j = 0; j < goalCount; j++) {
            const colData = rows.map((row) => row.checks[j]); // 第 j 个 goal 对每个 requirement 的支持情况
            transposedChecks.push(colData);
          }

          this.dynamicColumns = transposedChecks;
        })
        .finally(() => {
          this.loadingTable = false;
        });
    },
    //毕业目标
    getTargetList() {
      const url = "/tes/graduation/goal";
      this.loadingTarget = true;
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          this.targetData = res;
        })
        .finally(() => {
          this.loadingTarget = false;
        });
    },
    //毕业要求
    getRequirements() {
      const url = "/tes/graduation/requirements";
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          this.tabData = res;
          this.tabBtns = res.map((item) => item.name);
        })
        .finally(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
#zonghe {
  .all-box {
    padding: 20px;
    box-sizing: border-box;
  }
  .step-one {
    margin-bottom: 20px;
    .step-one-content {
      display: flex;
      gap: 20px;
      .box-left {
        flex: 0 0 30%;
      }
      .box-right {
        flex: 0 0 calc(70% - 20px);
      }
    }
  }
  .step-two {
    margin-bottom: 20px;
    .step-two-content {
      display: flex;
      gap: 20px;
      .box-left {
        flex: 0 0 30%;
      }
      .box-right {
        flex: 0 0 calc(70% - 20px);
      }
    }
  }
  .step-three {
    background: #ffffff;
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
    border-radius: 10px;
    border: 1px solid #ffffff;
    padding: 40px 60px;
    margin-bottom: 20px;
    .my-table {
      :deep(table) {
        th,
        td {
          padding: 2px;
          text-align: center;
          border: 0;
        }
        th {
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          .cell {
            height: 71px;
            line-height: 71px;
            background: #a6b4ec;
            margin-bottom: 4px;
          }
        }
        td {
          .cell {
            height: 44px;
            line-height: 44px;
            background: #f6f9ff;
            .green {
              font-size: 20px;
              color: #48c978;
            }
            .red {
              font-size: 20px;
              color: #ff6666;
            }
          }
        }
      }
    }
  }
  .step-four {
    background: #ffffff;
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
    border-radius: 10px;
    border: 1px solid #ffffff;
    padding: 40px 60px;
    margin-bottom: 20px;
    .title {
      font-weight: bold;
      font-size: 20px;
      color: #1d2939;
      margin-bottom: 26px;
      .el-icon {
        color: #5a72cd;
        font-size: 20px;
      }
    }
    .goal-message {
      margin-bottom: 20px;
    }
    .my-table {
      :deep(table) {
        th,
        td {
          padding: 2px;
          border: 0;
        }
        th {
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          .cell {
            height: 71px;
            line-height: 71px;
            background: #a6b4ec;
            margin-bottom: 4px;
          }
        }
        td {
          .cell {
            height: 44px;
            line-height: 44px;
            background: #eff4ff;
            .blue {
              font-weight: bold;
              font-size: 16px;
              color: #5a72cd;
            }
          }
        }
      }
    }
  }
  .step-five {
    background: #ffffff;
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
    border-radius: 10px;
    border: 1px solid #ffffff;
    padding: 40px 60px;
    margin-bottom: 200px;
    .title {
      font-weight: bold;
      font-size: 20px;
      color: #1d2939;
      margin-bottom: 26px;
      .el-icon {
        color: #5a72cd;
        font-size: 20px;
      }
    }
    .five-btns {
      display: flex;
      gap: 10px;
      margin-bottom: 13px;
      .five-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 86px;
        height: 33px;
        border-radius: 4px;
        border: 1px solid #bec2ce;
        font-size: 14px;
        color: #686e7f;
        cursor: pointer;
        &.active,
        &:hover {
          color: #ffffff;
          background: #457aff;
          border: 1px solid #457aff;
        }
      }
    }
    .five-content {
      font-size: 16px;
      background: #f6f9ff;
      border-radius: 4px;
      border: 1px solid #f6f9ff;
      font-size: 16px;
      color: #1d2939;
      line-height: 31px;
      padding: 20px 25px;
      .tab-content {
        color: #1d2939;
        font-weight: bold;
      }
    }
  }
  @media (max-width: 1230px) {
    .step-one {
      margin-bottom: 20px;
      .step-one-content {
        flex-wrap: wrap;
        .box-left {
          flex: 0 0 100%;
        }
        .box-right {
          flex: 0 0 100%;
        }
      }
    }
    .step-two {
      .step-two-content {
        flex-wrap: wrap;
        .box-left {
          flex: 0 0 100%;
        }
        .box-right {
          flex: 0 0 100%;
        }
      }
    }
  }
}
</style>